<template>
  <div class="toolbarNodeBtnList" :class="[dir, { isDark }]">
    <template v-for="(item, index) in list">
      <div
        :key="index"
        v-if="item === 'back'"
        class="toolbarBtn"
        :class="{
          disabled: readonly || backEnd
        }"
        @click="$bus.exec('BACK')"
      >
        <span class="icon iconfont-chaojizhiku iconhoutui-shi" />
        <span class="text">回退</span>
      </div>
      <div
        :key="index"
        v-if="item === 'forward'"
        class="toolbarBtn"
        :class="{
          disabled: readonly || forwardEnd
        }"
        @click="$bus.exec('FORWARD')"
      >
        <span class="icon iconfont-chaojizhiku iconqianjin1" />
        <span class="text">前进</span>
      </div>
      <div
        :key="index"
        v-if="item === 'painter'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0 || hasGeneralization,
          active: isInPainter
        }"
        @click="$bus.emit('startPainter')"
      >
        <span class="icon iconfont-chaojizhiku iconjiedian" />
        <span class="text">格式刷</span>
      </div>
      <div
        :key="index"
        v-if="item === 'siblingNode'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0 || hasRoot || hasGeneralization
        }"
        @click="$bus.exec('INSERT_NODE')"
      >
        <span class="icon iconfont-chaojizhiku iconjiedian" />
        <span class="text">同级节点</span>
      </div>
      <div
        :key="index"
        v-if="item === 'childNode'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0 || hasGeneralization
        }"
        @click="$bus.exec('INSERT_CHILD_NODE')"
      >
        <span class="icon iconfont-chaojizhiku icontianjiazijiedian" />
        <span class="text">子节点</span>
      </div>
      <div
        :key="index"
        v-if="item === 'deleteNode'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0
        }"
        @click="execCommand('REMOVE_NODE')"
      >
        <span class="icon iconfont-chaojizhiku iconshanchu" />
        <span class="text">删除节点</span>
      </div>
      <div
        :key="index"
        v-if="item === 'image'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0
        }"
        @click="emit('showNodeImage')"
      >
        <span class="icon iconfont-chaojizhiku iconimage" />
        <span class="text">图片</span>
      </div>
      <div
        :key="index"
        v-if="item === 'icon'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0
        }"
        @click="showNodeIcon"
      >
        <span class="icon iconfont-chaojizhiku iconxiaolian" />
        <span class="text">图标</span>
      </div>
      <div
        :key="index"
        v-if="item === 'link'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0
        }"
        @click="$bus.$emit('showNodeLink')"
      >
        <span class="icon iconfont-chaojizhiku iconchaolianjie" />
        <span class="text">超链接</span>
      </div>
      <div
        :key="index"
        v-if="item === 'note'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0
        }"
        @click="$bus.$emit('showNodeNote')"
      >
        <span class="icon iconfont-chaojizhiku iconflow-Mark" />
        <span class="text">备注</span>
      </div>
      <div
        :key="index"
        v-if="item === 'tag'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0
        }"
        @click="$bus.$emit('showNodeTag')"
      >
        <span class="icon iconfont-chaojizhiku iconbiaoqian" />
        <span class="text">标签</span>
      </div>
      <div
        :key="index"
        v-if="item === 'summary'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0 || hasRoot || hasGeneralization
        }"
        @click="$bus.exec('ADD_GENERALIZATION')"
      >
        <span class="icon iconfont-chaojizhiku icongaikuozonglan" />
        <span class="text">概要</span>
      </div>
      <div
        :key="index"
        v-if="item === 'associativeLine'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0 || hasGeneralization
        }"
        @click="createAssociativeLine"
      >
        <span class="icon iconfont-chaojizhiku iconlianjiexian" />
        <span class="text">关联线</span>
      </div>
      <!-- <div
        :key="index"
        v-if="item === 'formula'"
        class="toolbarBtn"
        :class="{
          disabled: activeNodes.length <= 0 || hasGeneralization
        }"
        @click="showFormula"
      >
        <span class="icon iconfont-chaojizhiku icongongshi" />
        <span class="text">公式</span>
      </div> -->
    </template>
  </div>
</template>

<script>
import MindMapUtil from "@/views/super-idea/utils/mind-map"
import { useMind } from "@mind/store"
import { mapState } from "pinia"

export default {
  props: {
    dir: {
      type: String,
      default: "h" // h（水平排列）、v（垂直排列）
    },
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      activeNodes: [],
      backEnd: false,
      forwardEnd: true,
      readonly: false,
      isFullDataFile: false,
      timer: null,
      isInPainter: false
    }
  },
  computed: {
    ...mapState(useMind, ["isDark"]),
    hasRoot() {
      return (
        this.activeNodes.findIndex((node) => {
          return node.isRoot
        }) !== -1
      )
    },
    hasGeneralization() {
      return (
        this.activeNodes.findIndex((node) => {
          return node.isGeneralization
        }) !== -1
      )
    }
  },
  created() {
    this.$bus.$on("mode_change", this.onModeChange)
    this.$bus.$on("node_active", this.onNodeActive)
    this.$bus.$on("back_forward", this.onBackForward)
    this.$bus.$on("painter_start", this.onPainterStart)
    this.$bus.$on("painter_end", this.onPainterEnd)
  },
  unmounted() {
    this.$bus?.$off("mode_change", this.onModeChange)
    this.$bus?.$off("node_active", this.onNodeActive)
    this.$bus?.$off("back_forward", this.onBackForward)
    this.$bus?.$off("painter_start", this.onPainterStart)
    this.$bus?.$off("painter_end", this.onPainterEnd)
  },
  methods: {
    createAssociativeLine() {
      MindMapUtil.instance.mindMap.associativeLine.createLineFromActiveNode()
    },
    emit(name) {
      this.$bus.$emit(name)
    },
    execCommand(name) {
      this.$bus.exec(name)
    },
    // 监听模式切换
    onModeChange(mode) {
      this.readonly = mode === "readonly"
    },

    // 监听节点激活
    onNodeActive(args) {
      if (args) {
        this.activeNodes = [...args[1]]
      } else {
        this.activeNodes = null
      }
    },

    // 监听前进后退
    onBackForward(args) {
      if (args) {
        const [index, len] = args
        this.backEnd = index <= 0
        this.forwardEnd = index >= len - 1
      }
    },

    // 开始格式刷
    onPainterStart() {
      this.isInPainter = true
    },

    // 格式刷结束
    onPainterEnd() {
      this.isInPainter = false
    },

    // 显示节点图标侧边栏
    showNodeIcon() {
      this.$bus.$emit("close_node_icon_toolbar")
      this.$bus.$emit("showNodeIcon")
    },

    // 打开公式侧边栏
    showFormula() {
      this.setActiveSidebar("formulaSidebar")
    }
  }
}
</script>

<style lang="less" scoped>
.toolbarNodeBtnList {
  display: flex;

  &.isDark {
    .toolbarBtn {
      color: hsla(0, 0%, 100%, 0.9);

      .icon {
        background: transparent;
        border-color: transparent;
      }

      &:hover {
        &:not(.disabled) {
          .icon {
            background: hsla(0, 0%, 100%, 0.05);
          }
        }
      }

      &.disabled {
        color: #54595f;
      }
    }
  }

  .toolbarBtn {
    margin-right: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;

    // &:last-of-type {
    //   margin-right: 0;
    // }

    &:hover {
      &:not(.disabled) {
        .icon {
          background: #f5f5f5;
        }
      }
    }

    &.active {
      .icon {
        background: #f5f5f5;
      }
    }

    &.disabled {
      color: #bcbcbc;
      cursor: not-allowed;
      pointer-events: none;
    }

    .icon {
      display: flex;
      height: 26px;
      background: #fff;
      border-radius: 4px;
      border: 1px solid #e9e9e9;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      padding: 0 5px;
    }

    .text {
      margin-top: 3px;
    }
  }

  &.v {
    display: block;
    width: 120px;
    flex-wrap: wrap;

    .toolbarBtn {
      flex-direction: row;
      justify-content: flex-start;
      margin-bottom: 10px;
      width: 100%;
      margin-right: 0;

      &:last-of-type {
        margin-bottom: 0;
      }

      .icon {
        margin-right: 10px;
      }

      .text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
